<template>
  <div class="left borderStyle">
    <div class="left-tabs">
      <Tabs @clickEvent="clickTabEvent" />
    </div>
    <div class="left-tree left-tree-sbqj"  > <!-- v-show="tabId === 'fzjk'" -->
      <Tree :tabId='tabId' v-if="isshow"  :flag='flag'/>
    </div>
    <!-- <div class="left-tree left-tree-ssjc" v-if="tabId === 'zxjc' ||'jqr'|| 'sxt'">
      <Tree />
    </div> -->
    <!-- <div class="left-tree left-tree-ssjc" v-show="tabId === 'jqr'">
      <Tree />
    </div>
    <div class="left-tree left-tree-ssjc" v-show="tabId === 'sxt'">
      <Tree />
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue ,Watch} from "vue-property-decorator";
import Tabs from "../Tabs/index.vue";
import Tree from "../Tree/index.vue";

@Component({
  components: { Tabs, Tree },
})
export default class extends Vue {
  tabId: string = "fzjk";
  flag='';
  isshow = true;
  clickTabEvent(id: string,flag:any): void {
    // console.log(flag);
    this.flag=flag
    this.isshow = false
    setTimeout(()=>{
    this.isshow = true
    },50)
    this.tabId = id;
  }
   @Watch("tabId", { immediate: true, deep: true })
  public ControlDisplay(to: any, from: any) {
    
     this.$emit('ControlDisplay',this.tabId)
  }

}
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.1rem;
  &-tabs {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-select {
    width: 100%;
    height: 1rem;
  }
  &-tree {
    width: 100%;
    // padding: 0 0.1rem 0.1rem;
    overflow: auto;
  }
  &-tree-sbqj {
    height: calc(100% - 0.8rem);
  }
  &-tree-ssjc {
    height: calc(100% - 0.8rem);
  }
}
</style>
